@import "src/variables";

.mapping-page-container {
  margin: 4px;
  border-top-left-radius: 5px;


  .mappings {
    &__container {
      height: auto;
      margin: 0;
      padding: 0;
      padding-bottom: 1px;
      border-radius: 5px;
      padding: 4px 2px;

      &-header {
        font-size: 1.1em;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        margin-left: 2px;
        margin-right: 2px;

        font-weight: 100;
        background: $dark-background-color;
        color: $default-white;
        display: inline-block;
        clear: both;
        font-size: 18px;
        display: flex;

        span {
          border-top-right-radius: 5px;
          padding: 8px;
          background: $default-black;
          margin: 0;
        }

        .triangle-background {
          display: inline-block;
          justify-self: flex-start;
          top: 0;
          padding: 0;
          width: 0;
          height: 0;
          border-top: 0px solid transparent;
          border-bottom: 42px solid transparent;
          border-left: 40px solid $default-black;
          margin-right: -48px;
          margin-bottom: -8px;

        }


      }

      .row {
        margin: 0;

        &.empty-mappings {
          display: flex;
          justify-content: center;
          align-content: center;
          color: $dark-background-color;

          span {
            display: flex;
            padding: 32px;
            width: 100%;
            justify-content: center;
            align-content: center;
          }

        }

      }

      .mapping-item {
        &__container {
          min-height: 100px;
          margin: 0;
          padding: 0;

          .container-content {
            background: $dark-background-color;
            border-radius: 2px;
            font-size: 0.9em;
            height: calc(100% - 4px);
            color: $default-white;
            position: relative;
            font-weight: lighter;
            -webkit-box-shadow: -1px 2px 13px 3px $box-shadow-color;
            -moz-box-shadow: -1px 2px 13px 3px $box-shadow-color;
            box-shadow: -1px 2px 13px 3px $box-shadow-color;
            display: flex;
            flex-direction: column;
            margin: 3px 2px;

            .mapping-name {
              display: flex;
              align-content: center;
              padding: 8px;
              background: $dark-header-background-color;
              margin-bottom: 4px;

              border-bottom: 1px solid $default-black;
              -webkit-box-shadow: -1px 2px 13px 3px $box-shadow-color;
              -moz-box-shadow: -1px 2px 13px 3px $box-shadow-color;
              box-shadow: -1px 2px 13px 3px $box-shadow-color;

              img {
                height: 25px;
                width: auto;
                margin-top: auto;
                margin-bottom: auto;
              }

              span {
                margin-top: auto;
                margin-bottom: auto;
                margin-left: 4px;
              }
              .polling-indicator{
                background: transparent;
                margin-left: 8px;
                height: auto;
              }
            }

            .url-button {
              text-decoration: none;
              cursor: pointer;
              transition: 0.5s;
              color: $url-color;

              span:before {
                content: '\00bb  ';
                margin-left: -3px;
                opacity: 0;
              }

              &:hover {
                padding: 0 8px;
                color: $url-color-hover;

                span:before {
                  opacity: 1;
                }
              }
            }

            .mapping-info {
              margin-left: 8px;

              .smaller {
                font-size: smaller;
                font-weight: lighter;
                color: $grey-font-color;
              }

              .light {
                font-weight: lighter;
                color: $grey-font-color;
              }
            }



            .bottom-button-row {
              margin-top: auto;
              width: 100%;
              height: 40px;

              .centered-elements {
                position: relative;
                display: flex;
                justify-self: flex-end;
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin: 8px;



                .action-button {
                  z-index: 1;
                  position: absolute;
                  outline: none;
                  display: inline-block;
                  min-width: 110px;
                  padding: 8px 1.6em;
                  border: 0.05em solid $default-black;
                  border-radius: 0.12em;
                  box-sizing: border-box;
                  text-decoration: none;
                  font-family: 'Roboto', sans-serif;
                  font-weight: lighter;
                  color: $default-white;
                  text-shadow: 0 0.04em 0.04em $default-black 60%;
                  text-align: center;
                  transition: all 0.15s;
                  bottom: -25px;
                  right: 15px;

                  &:active,
                  &:focus {
                    opacity: 0;
                  }

                  &-install {
                    background-color: $install-button-color;
                  }

                  &-uninstall {
                    background-color: $uninstall-button-color;
                  }
                  &-create {
                    background-color: $create-button-color;
                    color: $default-white;
                    &:focus {
                      opacity: 1;
                    }
                  }
                }

                .action-button:hover {
                  text-shadow: 0 0 2em $button-border-color-hover;
                  color: $default-white;
                  border-color: $button-border-color-hover;
                }

                @media all and (max-width:30em) {

                  .action-button {
                    display: block;
                    margin: 0.4em auto;
                  }

                }


              }
            }

            &.unresolved {
              opacity: 0.7;
              pointer-events: none;
            }
            &.noMapping {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }

  .polling-indicator {
    height: 42.5px;
    display: inline-flex;
    position: relative;
    align-items: center;
    background: $default-black;

    .circle-border {
      width: 20px;
      height: 20px;
      padding: 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background: linear-gradient(0deg, $default-white 33%, $default-black 100%);
      animation: spin 1s linear 0s infinite;
    }

    .circle-core {
      width: 100%;
      height: 100%;
      background: $dark-background-color;
      border-radius: 50%;
    }

    @keyframes spin {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(359deg);
      }
    }

  }


  .updating-indicator {
    position: absolute;
    z-index: 1;
    display: flex;
    width: 80px;
    bottom: 33px;
    right: 26px;
  }

  .updating-indicator div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: $updating-indicator-color;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }


  .updating-indicator div:nth-child(1) {
    left: 8px;
    animation: updating-indicator1 0.6s infinite;
  }

  .updating-indicator div:nth-child(2) {
    left: 8px;
    animation: updating-indicator2 0.6s infinite;
  }

  .updating-indicator div:nth-child(3) {
    left: 32px;
    animation: updating-indicator2 0.6s infinite;
  }

  .updating-indicator div:nth-child(4) {
    left: 56px;
    animation: updating-indicator3 0.6s infinite;
  }

  @keyframes updating-indicator1 {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes updating-indicator3 {
    0% {
      transform: scale(1);
    }

    100% {
      transform: scale(0);
    }
  }

  @keyframes updating-indicator2 {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(24px, 0);
    }
  }



}
